<template>
  <!-- 内容区域 -->
  <div class="cata">
    <section class="category-wrap" ref="categoryWrap">
      <!-- 左侧分类导航 -->
      <div class="nav-side-wrapper" ref="sidewrapper">
        <ul class="nav-side">
          <li
            v-for="(item, index) in list"
            @click="selectMenu(index)"
            :class="flag == index ? 'active' : ''"
            :key="index"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <!-- 右侧商品数据 -->
      <div class="content-wrapper" ref="contentwrapper">
        <div class="a">
          <div class="content-slide">
            <img :src="catList.mainImgUrl" class="category-main-img" />
            <div
              class="category-list"
              v-for="(category, index) in catList.list"
              :key="index"
            >
              <p class="catogory-title">{{ category.title }}</p>
              <div
                class="product-item"
                v-for="(product, index) in category.productList"
                :key="index"
              >
                <img :src="product.imgUrl" class="product-img" />
                <p class="product-title">{{ product.title }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { categoryData } from "../../../api";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      flag: 0,
      list: [],
      catList: {},
    };
  },
  methods: {
    fetchCategory() {
      categoryData((res) => {
        this.list = res.data;
        // 初始化better-scroll
        this.$nextTick(() => {
          new BScroll(this.$refs.sidewrapper, { click: true });
          new BScroll(this.$refs.contentwrapper, { click: true });
        });
        this.categoryList();
      });
    },
    // 左侧点击事件
    selectMenu(index) {
      this.flag = index;
      this.categoryList();
    },
    categoryList() {
      // 设置  右边渲染数据
      this.catList = this.list[this.flag];
    },
    // 固定父容器高度
    setWrapperHeight() {
      // 计算  内容高度
      const contentH = window.screen.height - 100;
      // 固定 左侧列表高度
      this.$refs.sidewrapper.style.height = contentH + "px";
      // 固定右侧商品 内容高度
      this.$refs.contentwrapper.style.height = contentH + "px";
    },
  },
  created() {
    this.fetchCategory();
  },
  mounted() {
    // 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
    this.$nextTick(function () {
      this.setWrapperHeight();
      // 兼容手机 浏览器 滚动效果
      new BScroll(this.$refs.sidewrapper, { click: true });
      new BScroll(this.$refs.contentwrapper, { click: true });
    });
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/style/mixin";
.cata {
  display: flex;
}
.category-wrap {
  @include fj;
  width: 100%;
  margin-top: 80px;
  background: #f8f8f8;
  .nav-side-wrapper {
    width: 30%;
    height: 100%;
    overflow: hidden;
    .nav-side {
      width: 100%;
      @include boxSizing;
      background: #f8f8f8;
      li {
        width: 100%;
        height: 92px;
        text-align: center;
        line-height: 92px;
        font-size: 29px;
        &.active {
          color: $red;
          background: #fff;
        }
      }
    }
  }
  .content-wrapper {
    width: 70%;
    height: 100%;
    overflow: hidden;
    .content-slide {
      width: 100%;
      height: 100%;
      padding: 0 20px;
      background: #fff;
      @include boxSizing;
      overflow: hidden;
      .category-main-img {
        width: 100%;
      }
      .category-list {
        display: flex;
        flex-wrap: wrap;
        flex-shrink: 0;
        width: 100%;
        .catogory-title {
          width: 100%;
          font-size: 34px;
          font-weight: 500;
          padding: 40px 0;
        }
        .product-item {
          width: 33.3333%;
          margin-bottom: 20px;
          text-align: center;
          font-size: 30px;
          img {
            width: 100%;
          }
        }
      }
    }
  }
}
.a {
  // height: 100%;
  overflow: hidden;
}
</style>